<template>
	<view class="page">
		<view class="head">
			<view class="head-img">
				<image src="../../static/dafaulthead2.png" v-if="detail.avatarUrl == ''"></image>
				<image :src="detail.avatarUrl" mode="aspectFill" title="头像" v-else></image>
			</view>
			<view class="head-input" @click="showMulLinkageThreePicker">
				<text class="head-Select">{{location}}</text>
				<!-- <input class="head-Select" type="text" :value="location" disabled="" /> -->
				<image class="select-img"  src="../../static/app/jiaotou2.png">
				</image>
				<!-- 				<input class="head-Select" type="type" value="桂林" />
				<image class="select-img" src="../../static/jiaotou2.png"></image> -->
			</view>
		</view>
		<view class="list-wrap" @click="showDialog(1)">
			<view class="list-item">
				<view class="item-title">运政违章</view>
				<!-- <view class="item-sub-title">首次交易，三折起</view> -->
			</view>
		</view>
		<view class="list-wrap" @click="showDialog(2)">
			<view class="list-item item2">
				<view class="item-title">交通违章</view>
				<!-- <view class="item-sub-title">帮您记录每一单的交易情况</view> -->
			</view>
		</view>
		<view class="developing" v-if="developing">
			正在开发当中，请尽情期待... ...
		</view>
		<view class="closeIntegral" @click="closeIntegral()" v-if="developing">确定</view>
		<view class="mask" v-show="isShow"></view>
		<view class="dialog-wrap" v-show="isShow">
			<view class="logo">
				<image src="../../static/app/logo.png"></image>
			</view>
			<!-- <view class="input-wrap">
				<view class="input-item">
					<view class="input-label">
						姓名
					</view>
					<view class="input-box">
						<input class="input" placeholder-class="placeholder-class" placeholder="请输入真实姓名" type="text"
							v-model="form.realname">
					</view>
				</view>

				<view class="input-item">
					<view class="input-label">
						手机号
					</view>
					<view class="input-box">
						<input class="input" placeholder-class="placeholder-class" placeholder="请输入手机号" type="number"
							v-model="form.phone">
					</view>
				</view>
				<view class="address-item input-item">
					<view class="address input-label">
						地址
					</view>
					<view class="add-select input-box">
						<input class="input" disabled="" placeholder-class="placeholder-class" type="text"
							v-model="form.address">
						<image class="addimage" src="../../static/jiantou3.png">
						</image>
					</view>
				</view>
				<view class="input-item">
					<view class="input-label">
						车牌号
					</view>
					<view class="input-box">
						<input class="input" placeholder-class="placeholder-class" placeholder="请输入车牌号" type="text"
							v-model="form.car_number">
					</view>
				</view>
				<view class="input-item">
					<view class="input-label">
						车辆标识
					</view>
					<view class="input-box">
						<input class="input" placeholder-class="placeholder-class" placeholder="请输入车辆标识"
							type="text" v-model="form.identify">
					</view>
				</view>
			</view> -->
<view class="input-wrap">
				<view class="input-item">
					<view class="input-label">
						姓名:
					</view>
					<view class="input-box">
						<input class="input" placeholder-class="placeholder-class" placeholder="请输入真实姓名或公司名称" type="text"
							v-model="form.realname">
					</view>
				</view>

				<view class="input-item">
					<view class="input-label">
						手机号:
					</view>
					<view class="input-box">
						<input class="input" placeholder-class="placeholder-class" placeholder="请输入手机号" type="number"
							v-model="form.phone">
					</view>
				</view>


				<view class="address-item input-item">
					<view class="address input-label">
						地址:
					</view>
					<view class="add-select input-box">
						<input class="input" v-model="form.address" disabled="" placeholder-class="placeholder-class"
							type="text">
						<image class="addimage" src="../../static/jiantou3.png"></image>
					</view>
				</view>
				<view class="input-item">
					<view class="input-label">
						车牌号:
					</view>
					<view class="input-box">
						<input class="input" placeholder-class="placeholder-class" placeholder="请输入车牌号" type="text"
							v-model="form.car_number">
					</view>
				</view>
				<view class="input-item">
					<view class="input-label">
						备注:
					</view>
					<view class="input-box">
						<input class="input" :placeholder="tick"  placeholder-class="placeholder-class" type="text" v-model="form.remark">
					</view>
				</view>
			</view>
			<view class="dialog-btn" @click="formSubmit">
				提交
			</view>

			<view class="dialog-close" @click="closeDialog">
				<image src="../../static/app/close.png" mode=""></image>
			</view>

		</view>

		<view class="bottom-dialog-wrap" v-show="isShow">
			<view class="info-wrap" @click="phoneCall">
				<view class="info-item">
					<image src="../../static/app/phone.png" mode=""></image>
					<text>
						呼叫 {{phone}}
					</text>
				</view>
			</view>
			<view class="dialog-btn" @click="closeDialog">
				取消
			</view>
		</view>
		<mpvue-city-picker ref="mpvueCityPicker2" :pickerValueDefault="cityPickerValueDefault2" @onConfirm="onConfirm2">
		</mpvue-city-picker>
		<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm">
		</mpvue-city-picker>
		<footTabber></footTabber>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				tick:'',
				form: {
					realname: '', //姓名
					phone: '', //手机号
					car_number: '', //车牌号
					//type: '',
					remark: '', //备注
					address: '广西 桂林', //地址
					type: '', //所选择的福利id
					//city: '广西 桂林',//地址
				},
				phone: '19167744084',
				isShow: false,
				detail: {
					avatarUrl: '',
				},
				location: '',
				location2: '',
				cityPickerValueDefault: [0, 0, 0],
				cityPickerValueDefault2: [0, 0, 0],
				developing:false,
				timer:null,
			};
		},
		mounted() {

		},
		onLoad() {
			this.getData();
			this.getLocation(); //仅支持APP，在此页面会报错
			//let commonConfig = uni.getStorageSync('commonConfig');
			//this.phone = '' + commonConfig['service_phone'];
		},
		onPullDownRefresh() {
			this.getData();
			this.getLocation();
			setTimeout( () => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			/* 关闭积分福利内容 */
			closeIntegral() {
				this.developing = false
				if (this.timer) {
					clearTimeout(this.timer);
					this.timer = null;
				}
			},
			/* 积分福利内容 */
			showIntegral() {
				this.developing = true;
				this.timer = setTimeout(() => {
					this.developing = false
				}, 3000);
			},
			/* 获取头像 */
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('user.index/detail', {}, function(res) {
					self.detail = res.data.userInfo;
					
					uni.hideLoading();
				});
			},
			formSubmit: function(e) {
				let self = this;
				var formdata = self.form;
				//console.log(formdata);
				let bb = /^[\u4e00-\u9fa5]{0,}$/;
				if (!bb.test(self.form.realname)) {
					uni.showToast({
						title: '请填写正确的姓名',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				// if (formdata.realname == '') {
				// 	uni.showToast({
				// 		title: '请输入姓名',
				// 		duration: 1000,
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				
				if (self.form.phone == '') {
					uni.showToast({
						title: '请输入手机号码',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				
				
				let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
				if (!reg.test(self.form.phone)) {
					uni.showToast({
						title: '手机号码格式不正确',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				let regExp = /(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Za-z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)/
				if (!regExp.test(self.form.car_number)) {
					uni.showToast({
						title: '车牌号有误,请重填！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (self.form.car_number == '') {
					uni.showToast({
						title: '请输入车牌号',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				self._post('user.violation/add', formdata, function(res) {
					if(res.code ==1){
						uni.showToast({
							title: '提交成功！',
							duration: 2000,
							icon: 'none'
						});
						self.timer = setTimeout( () => {
						  self.getDataNum();
						}, 1000);
						if (self.timer) {
							clearTimeout(self.timer);
							self.timer = null;
						}					
						self.isShow = false;
					}
				});
			},
			/* 获取当前位置 */
			getLocation() {
				let self = this;
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						self.location = res.address.city;
					},
					fail: function(res) {
						
					}
				});
			},
			/*三级联动选择*/
			showMulLinkageThreePicker2() {
				this.$refs.mpvueCityPicker2.show();
			},
			/*确定选择的省市区*/
			onConfirm2(e) {
				this.selectCity = e.label;
				var str = this.selectCity.replace(/,/, "1");
				var str1 = str.indexOf("1");
				var str2 = str.indexOf(",");
				let str3 = e.label.substring(0, str1) + ' ' + e.label.substring(str1 + 1, str2 - 1)
				this.form.address = str3;
			},
			/*三级联动选择*/
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show();
			},
			/*确定选择的省市区*/
			onConfirm(e) {
				console.log(e)
				this.selectCity = e.label;
				var str = this.selectCity.replace(/,/, "1");
				var str1 = str.indexOf("1");
				var str2 = str.indexOf(",");
				var str3 = str.substring(str1 + 1, str2);
				this.location = str3;

			},
			phoneCall() {
				let self = this;
				uni.makePhoneCall({
					phoneNumber: self.phone
				});
			},
			showDialog(type) {
				let self = this;
				//self.developing = true
				self.isShow = true;
				self.form.type = type;
			},
			closeDialog() {
				let self = this;
				self.isShow = false;
			},
			/*跳转页面*/
			gotoPage(path) {
				let self = this;
				if (path.startsWith('/')) {
					uni.navigateTo({
						url: path
					});
				} else {
					self[path]();
				}
			},
		}
	}
</script>

<style lang="scss">
	@import 'violation.scss';
</style>
